import { Example } from '../../components'
import { Link } from '@brillout/docpress'
import { CSSinJSTool } from '../../components'

<CSSinJSTool prefix={<>As explained at <Link href="/css-in-js" /> and <a href="https://styled-components.com/docs/advanced#server-side-rendering">styled-components docs &gt; Server Side Rendering</a>, you need to</>}/>

You can follow along on <a href="https://www.alexrabin.com/blog/vite-ssr-styled-components">this tutorial</a> (vite-plugin-ssr was the [previous name of Vike](https://vite-plugin-ssr.com/vike)) on how to add styled-components to your Vike app.

Examples:
- <Example timestamp="2024.04" repo="lourot/vike-react-styled-components-grommet" />
- <Example timestamp="2024.04" repo="Pixelatex/vike-styled-ts" />
- <Example timestamp="2023.10" repo="alexrabin/vite-ssr-styled-components" />
  > vite-plugin-ssr was the [previous name of Vike](https://vite-plugin-ssr.com/vike).

## See also

- <Link href="/css-in-js" />
- <Link href="/grommet" />
